<script setup lang="ts">
import { reactive, Ref, ref, onMounted } from 'vue';

const flag: Ref<boolean> = ref(true);

const switchbar = () => {
  flag.value = !flag.value;
};


// 页面跳转
const start = () => {
	uni.navigateTo({
		url: '/pagesB/exam/start/start',
	});
};


</script>
<template>
  <view class="header">
    <view class="header_left" :class="{ active: flag }" @click="switchbar">未考试</view>
    <view class="header_right" :class="{ active: !flag }" @click="switchbar">已考试</view>
  </view>
  <template v-if="flag">
    <view class="container">
      <view class="container_item animate__animated animate__fadeInUp" v-for="i in 10">
        <view class="container_item_tag">期末考试</view>
        <view class="content">
          <view class="content_title">高等数学期末总复习</view>
          <view class="content_number">45题</view>
          <view class="content_time">2022-12-21 16:00~ 2022-12-21 18:00</view>
        </view>
        <view class="container_item_start" @click="start">开始考试</view>
      </view>
    </view>
  </template>
  <template v-else>
    <view class="container">
      <view class="container_item animate__animated animate__fadeInUp" v-for="i in 2">
        <view class="container_item_tag">期末考试</view>
        <view class="content">
          <view class="content_title">高等数学期末总复习</view>
          <view class="content_number">45题</view>
          <view class="content_time">2022-12-21 16:00~ 2022-12-21 18:00</view>
        </view>
        <view class="container_item_start">查看</view>
      </view>
    </view>
  </template>
</template>

<style scoped lang="scss">
.header {
  top: 0;
  position: sticky;
  z-index: 2;
  height: 120rpx;
  background-color: $bgcolor;
  @include flex(center);
  view {
    width: 120rpx;
    height: 60rpx;
    font-size: 25rpx;
    line-height: 60rpx;
    text-align: center;
    color: #fff;
    border: 1px solid #ffffff;
  }
  &_left {
    border-top-left-radius: 10rpx;
    border-bottom-left-radius: 10rpx;
  }
  &_right {
    border-top-right-radius: 10rpx;
    border-bottom-right-radius: 10rpx;
  }
  .active {
    background-color: #fff;
    color: $bgcolor;
  }
}
.container {
  padding: 30rpx;
  background-color: #f6f6f6;

  &_item {
    position: relative;
    height: 200rpx;
    border-radius: 10rpx;
    background-color: #fff;
    margin-bottom: 25rpx;
    @include flex(space-around);
    &_tag {
      position: absolute;
      border-radius: 10rpx;
      opacity: 0.7;
      top: 15rpx;
      left: 15rpx;
      padding: 5rpx;
      font-size: 20rpx;
      color: $bgcolor;
    }
    .content {
      &_title {
        font-weight: 600;
      }
      &_number {
        font-size: 20rpx;
      }
      &_time {
        position: absolute;
        bottom: 10rpx;
        left: 15rpx;
        color: #616161;
        font-size: 20rpx;
      }
    }

    &_start {
      width: 180rpx;
      height: 60rpx;
      border-radius: 10rpx;
      font-size: 25rpx;
      background-color: $bgcolor;
      color: #ffffff;
      line-height: 60rpx;
      text-align: center;
    }
  }
}
</style>
